<template>
  <div class="page-data-nh">
    <div class="bg-#fff dark:bg-#141414 b-rd-8 mb-20 pt-22">
      <div
        class="flex items-center mb-24 pl-20 pr-20 pb-16 bb-1px_solid_#EBEEF5 dark:bb-1px_solid_#363637"
      >
        <div class="un-color-primary-bg w-3 h-18 b-rd-2 mr-11"></div>
        <div class="one-level-tit flex-1">核验渠道管理</div>
      </div>
      <el-form
        class="mr-24 ml-24 mb-2"
        :model="searchParameters"
        :rules="rules"
        label-width="auto"
        ref="searchRef"
      >
        <el-row :gutter="60">
          <el-col :span="spanSize">
            <el-form-item prop="hello" label="接入系统">
              <el-input
                v-model="searchParameters.hello"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="spanSize">
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="searchParameters.hello"
                type="date"
                class="w-100%!"
                format="YYYY-MM-DD"
                placeholder="请选择"
                value-format="YYYY-MM-DD HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="spanSize">
            <el-form-item label="状态">
              <el-input
                v-model="searchParameters.hello"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="spanSize">
            <div class="flex justify-end mb-22">
              <el-button class="text-14 font-600 h-32" @click="reset"
                >清空</el-button
              >
              <el-button class="text-14 font-600 h-32" @click="query"
                >查询</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const searchParameters = ref({
  hello: "",
});
const searchRef = ref(null);
const spanSize = ref(6); // 根据屏幕宽度设置列数
const reset = () => {
  searchRef.value.resetFields();
};
const query = () => {
  searchRef.value.validate((valid) => {
    if (valid) {
      console.log("submit!");
      console.log(searchParameters.value);
    } else {
      return false;
    }
  });
};
const rules = reactive({
  hello: [{ required: true, message: "请输入", trigger: "change" }],
});
// searchRef有两个事件，一个searchRef.value.resetFields();，一个searchRef.value.validate();
</script>
<style lang="scss" scoped></style>
